<!doctype html>
<html>
  <head>
    <title>Composited scrolling ignores CSS clip</title>
    <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1058870">
    <script src="../../resources/testharness.js"></script>
    <script src="../../resources/testharnessreport.js"></script>
    <script src='../../resources/gesture-util.js'></script>
    <style>
    .behindscroller {
      width: 200px;
      height: 400px;
      background: lightgreen;
      position: absolute;
      top: 50px;
      left: 0;
    }
    .scroller {
      width: 200px;
      height: 400px;
      overflow-y: scroll;
      clip-path: circle(220px at 0 150px);
      position: absolute;
      top: 50px;
      left: 0;
    }
    </style>
  </head>
  <body onload="onLoad()">
    <div id="behindscroller" class="behindscroller"></div>
    <div id="scroller" class="scroller">
      <div id="forcescroll" style="height: 1000px; width: 100%; background: linear-gradient(grey, white)"></div>
    </div>
    You should not be able to wheel scroll with the mouse cursor in the green area.
  </body>
  <script>
    function onLoad(){
      var behindscroller= document.getElementById("behindscroller");
      var behindscrollerRect = behindscroller.getBoundingClientRect();

      async function scroll(x, y) {
        const distance = 10;
        const input_source = GestureSourceType.MOUSE_INPUT;
        const direction = "down";
        const scroll_speed = SPEED_INSTANT;

        await smoothScroll(distance, x, y, input_source, direction,
            scroll_speed,
            true /* precise_scrolling_deltas */,
            false /* scroll_by_page */);
      }

      if(window.promise_test){
        promise_test(function() {
          return new Promise(async function(resolve, reject) {
            var x = behindscrollerRect.right - 10;
            var y = behindscrollerRect.top + 5;
            await scroll(x, y);
            await conditionHolds( () => {
              return scroller.scrollTop == 0;
            }).then(resolve, reject);
          });
        }, "No scrolling in clipped out region 1");

        promise_test(function() {
          return new Promise(async function(resolve, reject) {
            var x = behindscrollerRect.left + 5;
            var y = behindscrollerRect.bottom - 5;
            await scroll(x, y);
            await conditionHolds( () => {
              return scroller.scrollTop == 0;
            }).then(resolve, reject);
          });
        }, "No scrolling in clipped out region 2");

        promise_test(function() {
          return new Promise(async function(resolve, reject) {
            var x = behindscrollerRect.left + 10;
            var y = behindscrollerRect.top + 10;
            await scroll(x, y);
            await conditionHolds( () => {
              return scroller.scrollTop > 0;
            }).then(resolve, reject);
          });
        }, "Scrolled in scroller region not clipped out");

        promise_test(function() {
          return new Promise(async function(resolve, reject) {
            var x = behindscrollerRect.right - 10;
            var y = behindscrollerRect.top + 100;
            await scroll(x, y);
            await conditionHolds( () => {
              return scroller.scrollTop > 0;
            }).then(resolve, reject);
          });
        }, "Scrolled in scrollbar region not clipped out");
      }
    }
  </script>
</html>
